<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      span {
        margin: 5px;
      }
      .item {
        padding: 5px 10px;
        cursor: pointer;
      }
      input {
        width: 80px;
      }
      .active {
        background-color: rgb(78, 78, 160);
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div style="margin: 20px" v-for="typeItem in types">
        <span class="title">{{typeItem.title}}:</span>
        <span 
          :class="{item:true,active:item==results[typeItem.param]}"
          v-for="item in typeItem.options"
          @click="results[typeItem.param]=item"
          >{{item||"不限"}}</span
        >
        <!-- 输入价格区间 -->
        <template v-if="typeItem.title=='价格'">
          <input
            type="text"
            v-model="typeItem.p1"
            @input="typeItem.p1=typeItem.p1.replace(/\D/g,'')"
          />
          -
          <input
            type="text"
            v-model="typeItem.p2"
            @input="typeItem.p2=typeItem.p2.replace(/\D/g,'')"
          />
          <button
            @click="results[typeItem.param]=typeItem.p1+'-'+typeItem.p2+'万'"
          >
            确定
          </button>
        </template>
      </div>
      <!-- Object.values(results) 获取对象值的集合 -->
      <!-- 当前筛选模块 -->
      <div
        style="margin: 20px"
        v-show="Object.values(results).some(item=>item!='')"
      >
        <span>当前筛选:</span>
        <span class="item" v-for="item in types" v-show="results[item.param]"
          >{{item.title}}:{{results[item.param]}}</span
        >
      </div>
      <pre>{{results}}</pre>
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          types: [
            {
              title: "品牌",
              param: "brand",
              options: ["", "奔驰", "宝马", "奥迪"],
            },
            {
              title: "车型",
              param: "model",
              options: ["", "两厢轿车", "三厢轿车", "suv"],
            },
            {
              title: "价格",
              param: "price",
              options: ["", "5万以下", "5-10万", "10万以上"],
              p1: "",
              p2: "",
            },
          ],
          results: {
            brand: "",
            model: "",
            price: "",
          },
        };
      },
      methods: {
        setResult(item) {
          console.log(item);
        },
      },
    });
    app.mount("#app");
  </script>
</html>
